<template>
  <div class="page_padding out_main">
    <MyNavBar @goback="goback" :title="title" />
    <div class="notice_con">
      <van-tabs
        @click="onTabsClick"
        class="cont-tab"
        :class="boardTabsData.length == 1 ? 'out-main-width1' : 'out-main-width2'"
        v-model="active"
        :sticky="true"
        line-width="35"
        line-height="2"
        title-active-color="#d80a06"
        title-inactive-color="#333333"
        border
        swipeable>
        <van-tab v-for="tab in boardTabsData" :key="tab.id" :title="tab.name" :name="tab.id"></van-tab>
      </van-tabs>
      <DutyCheckList v-if="active === 1" />
      <DutyStaticsListNew :showAll="showAll" v-if="active === 3" />
      <DutyAddList :showDuCha="showDuCha" v-if="active === 2" />
      <DutyInspect :showDuCha="showDuCha" v-if="active === 4" />
      <DutyAbsent v-if="active === 5"></DutyAbsent>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import MyNavBar from '@com/MyNavBar'
import DutyAddList from './components/DutyAddList' //考勤表单
import DutyCheckList from './components/DutyCheckList' //考勤审批
import DutyInspect from './components/DutyInspect' //
import DutyStaticsListNew from './components/DutyStaticsListNew' //考勤统计
import DutyAbsent from './components/DutyAbsent' // 旷工记录
export default {
  name: 'outDutyNew',
  components: {
    MyNavBar,
    DutyAddList,
    DutyCheckList,
    DutyInspect,
    DutyStaticsListNew,
    DutyAbsent,
  },
  data() {
    return {
      title: '日常考勤',
      userInfo: JSON.parse(localStorage.userInfo),
      active: '1',

      boardTabsData: [],
      menuList: [
        { name: '考勤审批', id: 1 },
        { name: '考勤表单', id: 2 },
        { name: '考勤统计', id: 3 },
        { name: '旷工记录', id: 5 },
      ],
      showAll: '1', //统计角色（1个人统计，2个人部门，3全局）
      showDuCha: '1', //督查角色（2机关汇总,3大厅汇总,4考核办督查）
      buttonList: [],
    }
  },
  watch: {},
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isAdminRole', 'isMainRole', 'isOrgRole', 'isPartRole']),
  },
  created() {
    this.dealAudit()
  },
  mounted() {},
  methods: {
    goback() {
      this.$store.state.pageTab = '1'
      this.$store.state.pageTabTwo = ''
      this.$router.go(-1)
    },
    removeArr(arr) {
      const res = new Map()
      return arr.filter(arr => !res.has(arr.id) && res.set(arr.id, 1))
    },
    dealAudit() {
      let tabsData = []

      if (this.isAdminRole) {
        tabsData.push(this.menuList[2])
        this.showAll = '4'
      }
      if (this.isMainRole || this.isPartRole) {
        tabsData.push(this.menuList[0], this.menuList[2])
        this.showAll = '3'
      }
      if (this.isOrgRole) {
        tabsData.push(this.menuList[0], this.menuList[1], this.menuList[2])
        this.showAll = '2'
      }
      if (this.isNormalRole) {
        tabsData.push(this.menuList[1], this.menuList[2])
      }
      if (this.isOtherRole) {
        tabsData.push(this.menuList[1], this.menuList[2])
      }
      this.boardTabsData = this.removeArr(tabsData)
      // 数组排序
      this.boardTabsData.sort((a, b) => {
        return a.id - b.id
      })

      this.active = this.boardTabsData[0].id
      let routeLength = this.$route.path.length
      if (this.$store.state.pageTab.substring(0, routeLength) == this.$route.path) {
        this.active = Number(this.$store.state.pageTab.substring(this.$route.path.length))
      }
      if (this.$route.query.activeTabs) {
        this.active = Number(this.$route.query.activeTabs)
      }
    },
    onTabsClick() {
      this.$store.state.pageTab = this.$route.path + this.active
    },
  },
}
</script>

<style lang="scss" scoped>
.out_main {
  /deep/ .van-popup {
    position: absolute;
  }
}
.out-main-width1 {
  width: 50%;
}
.out-main-width2 {
  width: 100%;
}
.notice_con {
  padding: 8px 0 10px;
  width: 100%;
  .cont-tab {
    height: 100%;
    /deep/.van-tabs__wrap {
      height: 36px;
      background: #fff;
      // margin-bottom: 10px;
      border-bottom: 1px solid #efefef;
      .van-tab__text {
        line-height: 36px;
        // font-size: 14px;
      }
      .van-tabs__nav {
        width: 100%;
      }
    }
  }
}
</style>
